<abp-modal *ngIf="visible" [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
  <ng-template #abpHeader>
    <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <div class="row">
      <ng-container *ngIf="groups.length">
        <div class="col-md-4">
          <ul
            ngbNav
            #nav="ngbNav"
            [(activeId)]="selectedGroupDisplayName"
            class="nav-pills"
            orientation="vertical"
          >
            <li
              *ngFor="let group of groups; trackBy: track.by('name')"
              [ngbNavItem]="group.displayName"
            >
              <a ngbNavLink>{{ group.displayName }}</a>
              <ng-template ngbNavContent>
                <h4>{{ selectedGroupDisplayName }}</h4>
                <hr class="mt-2 mb-3" />

                <div
                  class="mt-2"
                  *ngFor="
                    let feature of features[group.name];
                    let i = index;
                    trackBy: track.by('id')
                  "
                  [ngStyle]="feature.style"
                  [ngSwitch]="feature.valueType?.name"
                  (keyup.enter)="save()"
                >
                  <ng-container *ngSwitchCase="valueTypes.ToggleStringValueType">
                    <div class="form-check">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        [id]="feature.name"
                        [(ngModel)]="feature.value"
                        (ngModelChange)="onCheckboxClick($event, feature)"
                      />

                      <label class="form-check-label" [htmlFor]="feature.name">{{
                        feature.displayName
                      }}</label>
                      <ng-container
                        *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
                      ></ng-container>
                    </div>
                  </ng-container>
                  <ng-container *ngSwitchCase="valueTypes.FreeTextStringValueType">
                    <div class="mb-3 form-group">
                      <label [htmlFor]="feature.name" class="form-label">{{
                        feature.displayName
                      }}</label>
                      <input
                        class="form-control"
                        type="text"
                        [id]="feature.name"
                        [(ngModel)]="feature.value"
                        [abpFeatureManagementFreeText]="feature"
                      />

                      <ng-container
                        *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
                      ></ng-container>
                    </div>
                  </ng-container>
                  <ng-container *ngSwitchCase="valueTypes.SelectionStringValueType">
                    <ng-container *ngIf="feature.valueType.itemSource?.items?.length">
                      <div class="mb-3 form-group">
                        <label [htmlFor]="feature.name" class="form-label">{{
                          feature.displayName
                        }}</label>
                        <select class="form-select" [id]="feature.name" [(ngModel)]="feature.value">
                          <option
                            *ngFor="
                              let item of feature.valueType.itemSource?.items;
                              trackBy: track.by('value')
                            "
                            [ngValue]="item.value"
                          >
                            {{
                              item.displayText?.resourceName + '::' + item.displayText?.name
                                | abpLocalization
                            }}
                          </option>
                        </select>
                        <ng-container
                          *ngTemplateOutlet="descTmp; context: { $implicit: feature.description }"
                        ></ng-container>
                      </div>
                    </ng-container>
                  </ng-container>
                  <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>
                </div>
              </ng-template>
            </li>
          </ul>
        </div>

        <ng-template #descTmp let-description>
          <small *ngIf="description" class="d-block form-text text-muted">{{ description }}</small>
        </ng-template>

        <div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div>
      </ng-container>

      <div class="col" *ngIf="!groups.length">
        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
      </div>
    </div>
  </ng-template>

  <ng-template #abpFooter>
    <button abpClose type="button" class="btn btn-link">
      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
    </button>

    <abp-button
      *ngIf="groups.length"
      iconClass="fa fa-refresh"
      buttonClass="btn btn-outline-primary"
      [disabled]="modalBusy"
      (click)="resetToDefault()"
      aria-hidden="true"
    >
      {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
    </abp-button>

    <abp-button
      *ngIf="groups.length"
      iconClass="fa fa-check"
      [disabled]="modalBusy"
      (click)="save()"
      aria-hidden="true"
    >
      {{ 'AbpFeatureManagement::Save' | abpLocalization }}
    </abp-button>
  </ng-template>
</abp-modal>
